<template>
  <view
    class="container bg-img flex-1 flex flex-col"
    :style="{
      backgroundImage: `url(${
        isBigSreen
          ? 'https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/bg/bg_big.jpg'
          : 'https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/bg/bg_mobile.jpeg'
      })`,
    }"
  >
    <view class="flex flex-col justify-between flex-1">
      <view class="flex-1">
        <view
          class="w-[32%] ml-[5%]"
          :class="isBigSreen ? 'mt-[72rpx]' : 'mt-[36rpx]'"
        >
          <image
            class="w-full h-full"
            mode="widthFix"
            src="@/static/ai-logos.png"
          ></image>
        </view>
        <view class="flex justify-end w-full">
          <image
            class="w-[63%]"
            src="@/static/ai-title.png"
            mode="widthFix"
          ></image>
        </view>
      </view>

      <view class="flex justify-center w-full mb-[16%]">
        <view @click.stop="go" class="w-[20%] aspect-square">
          <view class="canyu"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
import { ref, reactive, computed, onMounted } from "vue";

const isBigSreen = computed(() => {
  return uni.getSystemInfoSync().windowWidth > 500;
});

const go = () => {
  // toggleFullScreen();
  uni.navigateTo({
    url: "/pages/ai/guide",
  });
};
onLoad(({ id }) => {
  if (id) {
    uni.reLaunch({
      url: "/pages/ai/result?id=" + id,
    });
  }
});

const toggleFullScreen = () => {
  const element = document.documentElement; // 获取 <html> 元素
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) {
    /* Firefox */
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) {
    /* Chrome, Safari & Opera */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) {
    /* IE/Edge */
    element.msRequestFullscreen();
  }
};
</script>

<style lang="scss" scoped>
.bg-img {
  // background: url("https://lc-ocean.oss-cn-guangzhou.aliyuncs.com/ocean-2024/uploads/bg/ai-bg.jpeg")
  //   no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .go {
    width: 42%;
    padding: 2%;
    font-family: Source Han Serif CN, Source Han Serif CN;
    font-weight: 700;
    font-size: 48rpx;
    color: #2568ec;
    text-align: center;
    background: #ffe376;
    box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.3);
    border-radius: 67rpx 67rpx 67rpx 67rpx;
  }
  .canyu {
    width: 100%;
    height: 100%;
    background: url("@/static/ai-start.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
}
</style>
